<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row>
            <Col>
              <Button @click="downloadPDF()" style="margin:20px 0" type="primary">打印表格数据为pdf文件</Button>
              <!-- 页面展示区 -->
              <div>
                <Row>
                  <AttendanceLabel />
                </Row>
                <Row style="padding-bottom:30px;" :style="showScroll">
                  <AttendanceTable />
                  <AttendanceTableData ref="attendanceTableData" :searchForm="searchForm"></AttendanceTableData>
                </Row>
              </div>
              <!-- pdf打印区 -->
              <div style="position:fixed;top:0;left:-2000px;">
              <!-- <div> -->
                <div id="studentAttendance" style="width:1052px;margin-left:auto; margin-right:auto;">
                  <Row >
                    <AttendanceLabel />
                  </Row>
                  <Row style="padding-bottom:30px;" :style="showScroll">
                    <AttendanceTable />
                    <AttendanceTableData ref="attendanceTableData" :searchForm="searchForm"></AttendanceTableData>
                  </Row>
                </div>
              </div>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import AttendanceLabel from "./attendance-label";
import AttendanceTable from "./attendance-table";
import AttendanceTableData from "./attendance-table-data";
import printPdfBigWidth from "@/libs/printPdfBigWidth";

export default {
  name: "pdf-print",
  components: {
    AttendanceLabel,
    AttendanceTable,
    AttendanceTableData
  },
  data() {
    return {
      searchForm:{},
    };
  },
  methods: {
    // 导出pdf
    downloadPDF() {
      printPdfBigWidth.printPdfBigWidth(
        document.querySelector("#studentAttendance"),
        "学生考勤"
      );
    },
  },
  computed: {
    width() {
      return Number(document.documentElement.clientWidth);
    },
    showScroll() {
      if (this.width <= 1280) {
        return {
          "overflow-x": "scroll",
          "overflow-y": "hidden"
        };
      }else{
        return{}
      }
    }
  },
};
</script>
<style>
.mb10{
  margin-top:10px;
}
</style>
<style lang="less">
/* 打印区边线控制 */
#studentAttendance .attTable .tableBox2 table,
#studentAttendance2 .attTable .tableBox2 table{
  border-color:#666;border-style: solid;border-width: 0 1px 0 0;
}

#studentAttendance .attTable .tableBox1 .borderBox,
#studentAttendance2 .attTable .tableBox1 .borderBox{
  border-color:#666;border-style: solid;border-width: 1px 0 0 1px;
}
#studentAttendance .attTable .tableBox2 table thead th
,#studentAttendance .attTable .tableBox2 table tbody td,
#studentAttendance2 .attTable .tableBox2 table thead th
,#studentAttendance2 .attTable .tableBox2 table tbody td

{
    border-color:#666;border-style: solid;border-width: 1px 0 0 1px;
}
#studentAttendance .attTable.data table tbody td,
#studentAttendance2 .attTable.data table tbody td{
  border-color:#666;border-style: solid;border-width: 1px 0px 0px 1px;
}
</style>
